<template>
  <view class="pet-page">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="page-title">我的宠物</text>
    </view>

    <!-- 宠物系统内容 -->
    <view class="pet-content">
      <view class="pet-list" v-if="currentPets.length > 0">
        <view 
          v-for="pet in currentPets" 
          :key="pet.id"
          class="pet-card"
          @tap="selectPet(pet)"
        >
          <view class="pet-avatar">
            <text class="pet-emoji">{{ pet.type === 'cat' ? '🐱' : '🐶' }}</text>
          </view>
          <view class="pet-info">
            <text class="pet-name">{{ pet.name }}</text>
            <view class="pet-stats">
              <text class="stat">❤️ {{ pet.health }}</text>
              <text class="stat">🍖 {{ pet.hunger }}</text>
              <text class="stat">😊 {{ pet.happiness }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-else class="empty-state">
        <text class="empty-text">还没有宠物哦</text>
      </view>

      <!-- 添加宠物按钮 -->
      <view class="add-pet-btn" @tap="showPetShop">
        <text class="add-icon">+</text>
        <text class="add-text">领养新宠物</text>
      </view>

      <!-- 宠物商店弹窗 -->
      <view class="pet-shop-modal" v-if="showShop">
        <view class="modal-content">
          <view class="modal-header">
            <text class="modal-title">领养宠物</text>
            <text class="close-btn" @tap="hideShop">×</text>
          </view>
          <view class="pet-types">
            <view 
              class="pet-type-item"
              v-for="type in petTypes"
              :key="type.id"
              @tap="selectPetType(type)"
            >
              <text class="pet-emoji">{{ type.emoji }}</text>
              <text class="pet-type-name">{{ type.name }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 在 action-buttons 下方添加 -->
      <view class="interaction-system">
        <!-- 技能系统 -->
        <view class="skill-list" v-if="selectedPet && selectedPet.level > 1">
          <text class="section-title">已解锁技能</text>
          <view class="skills">
            <view 
              v-for="skill in unlockedSkills"
              :key="skill.id"
              class="skill-item"
              @tap="useSkill(skill)"
            >
              <text class="skill-icon">{{ skill.icon }}</text>
              <text class="skill-name">{{ skill.name }}</text>
            </view>
          </view>
        </view>

        <!-- 互动记录 -->
        <view class="interaction-log">
          <text class="section-title">互动记录</text>
          <scroll-view scroll-y class="log-list">
            <view 
              v-for="(log, index) in interactionLogs"
              :key="index"
              class="log-item"
            >
              <text class="log-time">{{ formatTime(log.time) }}</text>
              <text class="log-text">{{ log.text }}</text>
            </view>
          </scroll-view>
        </view>
      </view>

      <!-- 在 add-pet-btn 上方添加 -->
      <view class="daily-task">
        <text class="task-title">今日任务</text>
        <view class="task-list">
          <view 
            v-for="task in dailyTasks"
            :key="task.id"
            class="task-item"
            :class="{ completed: task.completed }"
          >
            <text class="task-icon">{{ task.completed ? '✅' : '⚪' }}</text>
            <text class="task-text">{{ task.text }}</text>
            <text class="task-reward">+{{ task.reward }}💎</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PetPage',
  
  data() {
    return {
      showShop: false,
      currentPets: [],
      petTypes: [
        { id: 1, type: 'cat', name: '猫咪', emoji: '🐱' },
        { id: 2, type: 'dog', name: '小狗', emoji: '🐶' }
      ],
      dailyTasks: [
        { id: 1, text: '完成3次喂食', reward: 50, completed: false },
        { id: 2, text: '与宠物玩耍2次', reward: 30, completed: false },
        { id: 3, text: '清洁宠物1次', reward: 20, completed: false }
      ],
      interactionLogs: [],
      skills: [
        { id: 1, name: '装死', icon: '💀', level: 2 },
        { id: 2, name: '跳舞', icon: '💃', level: 3 },
        { id: 3, name: '后空翻', icon: '��', level: 5 }
      ],
      selectedPet: null
    }
  },

  created() {
    this.loadPets()
  },

  computed: {
    unlockedSkills() {
      return this.skills.filter(s => s.level <= (this.selectedPet?.level || 1))
    }
  },

  methods: {
    loadPets() {
      const savedPets = uni.getStorageSync('pets') || []
      this.currentPets = savedPets
    },

    showPetShop() {
      this.showShop = true
    },

    hideShop() {
      this.showShop = false
    },

    selectPetType(type) {
      uni.showModal({
        title: '给宠物起个名字',
        editable: true,
        placeholderText: '请输入宠物名字',
        success: (res) => {
          if (res.confirm && res.content) {
            this.adoptPet(type, res.content)
          }
        }
      })
    },

    adoptPet(type, name) {
      const newPet = {
        id: Date.now(),
        type: type.type,
        name: name || '未命名宠物',
        health: 100,
        hunger: 100,
        happiness: 100,
        createdAt: Date.now()
      }
      
      this.currentPets.push(JSON.parse(JSON.stringify(newPet)))
      uni.setStorageSync('pets', {
        version: 2,
        data: this.currentPets
      })
      this.hideShop()
      
      uni.showToast({
        title: '领养成功！',
        icon: 'success'
      })
    },

    selectPet(pet) {
      console.log('正在传递的宠物数据:', JSON.stringify(pet));
      
      uni.navigateTo({
        url: `/pages/pet/detail?id=${pet.id}&name=${encodeURIComponent(pet.name)}`
      })
    },

    goBack() {
      uni.navigateBack()
    },

    addInteractionLog(text) {
      this.interactionLogs.unshift({
        time: Date.now(),
        text
      })
      if (this.interactionLogs.length > 10) this.interactionLogs.pop()
    },

    formatTime(timestamp) {
      const date = new Date(timestamp)
      return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
    },

    useSkill(skill) {
      uni.showToast({
        title: `${this.selectedPet.name} 正在${skill.name}！`,
        icon: 'none'
      })
      this.addInteractionLog(`使用了技能：${skill.name}`)
    }
  }
}
</script>

<style lang="scss">
.pet-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-top: 44px;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: #4CAF50;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 100;
  
  .back-btn {
    padding: 8px;
    margin-left: -8px;
    
    .back-icon {
      color: white;
      font-size: 20px;
    }
  }
  
  .page-title {
    color: white;
    font-size: 18px;
    font-weight: 500;
    margin-left: 16px;
  }
}

.pet-content {
  padding: 16px;
  position: relative;
  min-height: calc(100vh - 44px);
}

.pet-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding-bottom: 80px;
}

.pet-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  
  .pet-avatar {
    text-align: center;
    margin-bottom: 12px;
    
    .pet-emoji {
      font-size: 48px;
    }
  }
  
  .pet-info {
    text-align: center;
    
    .pet-name {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 8px;
    }
    
    .pet-stats {
      display: flex;
      justify-content: center;
      gap: 8px;
      
      .stat {
        font-size: 12px;
        color: #666;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  
  .empty-text {
    color: #999;
    font-size: 16px;
  }
}

.add-pet-btn {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: #4CAF50;
  color: white;
  padding: 12px 24px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(76,175,80,0.3);
  z-index: 10;
  
  .add-icon {
    font-size: 20px;
  }
  
  .add-text {
    font-size: 16px;
  }
}

.pet-shop-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  
  .modal-content {
    background: white;
    border-radius: 16px;
    width: 80%;
    max-width: 320px;
    padding: 24px;
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    
    .modal-title {
      font-size: 18px;
      font-weight: 500;
    }
    
    .close-btn {
      font-size: 24px;
      color: #999;
      padding: 4px;
    }
  }
  
  .pet-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    
    .pet-type-item {
      background: #f5f5f5;
      border-radius: 12px;
      padding: 16px;
      text-align: center;
      cursor: pointer;
      
      .pet-emoji {
        font-size: 32px;
        display: block;
        margin-bottom: 8px;
      }
      
      .pet-type-name {
        font-size: 14px;
        color: #333;
      }
    }
  }
}

.interaction-system {
  margin-top: 24px;
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 12px;
    display: block;
    position: relative;
    padding-left: 12px;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 16px;
      background: #4CAF50;
      border-radius: 2px;
    }
  }

  .skills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    
    .skill-item {
      background: rgba(255,255,255,0.9);
      border-radius: 12px;
      padding: 12px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      
      &:active {
        transform: scale(0.98);
      }
      
      .skill-icon {
        font-size: 24px;
        display: block;
        margin-bottom: 4px;
      }
      
      .skill-name {
        font-size: 12px;
        color: #4a5568;
      }
    }
  }

  .interaction-log {
    margin-top: 24px;
    
    .log-list {
      max-height: 200px;
      background: rgba(255,255,255,0.9);
      border-radius: 12px;
      padding: 12px;
      
      .log-item {
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        .log-time {
          font-size: 12px;
          color: #718096;
          margin-right: 12px;
          flex-shrink: 0;
        }
        
        .log-text {
          font-size: 14px;
          color: #2d3748;
        }
      }
    }
  }
}

.daily-task {
  background: white;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  
  .task-title {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 12px;
    display: block;
  }

  .task-list {
    .task-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #eee;
      
      &:last-child {
        border-bottom: none;
      }
      
      &.completed {
        .task-text {
          color: #718096;
          text-decoration: line-through;
        }
      }
      
      .task-icon {
        margin-right: 12px;
      }
      
      .task-text {
        flex: 1;
        font-size: 14px;
        color: #2d3748;
      }
      
      .task-reward {
        font-size: 14px;
        color: #4CAF50;
        font-weight: 500;
      }
    }
  }
}
</style> 